<template>
    <div class="top">
        <ul>
            <li v-for='(item,index) in top' :key='index' @click='btncolor(index)' :class='a == index ? color1 : color2'>
                <router-link class="routerlink" :to='item.src'><h4>{{item.title}}</h4></router-link>            
            </li>
        </ul>
        
    <!-- <router-view/> -->
            <Connent></Connent> 
    <indexBottom></indexBottom>
    </div>
</template>

<script>
import indexBottom from '@/components/njrcomponents/index_bottom.vue'
import Connent from'./Connent'
export default {
data () {
    return {
        top:[
            {title:'日',src:'/history/day'},
            {title:'周',src:'/history/week'},
            {title:'月',src:'/history/month'},
            {title:'季',src:'/history/quarter'},
        ],
        color1:'color1',
        color2:'color2',
        a:-1,
    }
},
methods: {
    btncolor:function(index){
        // alert(index);
            this.a=index;
    }
},
components: {
  indexBottom,
  Connent
}
}
</script>

<style scoped>
.color1{
    background-color: white;
    color: blueviolet;
}
.color2{
    color: white;
}
ul{
    background-color: blueviolet;
    text-align: center;
    padding-left: 0;
    height: 4rem;
}
li{
    height: 0.66rem;
    width: 1.4rem;
    /* background-color: red; */
    margin-left: 5%;
    font-size: 0.4rem;
    line-height: 0.66rem;
    border-radius: 0.33rem;
    list-style-type: none;
    display: inline-block;
    text-align: center;  
}
.routerlink{
    text-decoration: none;
}
</style>